<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
</head>
<body>
    <div id = 'main' >
        <span id="startBtn" onclick="startGame()">START</span>
        <span id="num">0</span>
        <div id="b_yellow">
            <div id="b_red">
                100%
            </div>
        </div>
        <img src="./game素材/imgs/girl.gif" alt="" id="girl">
        <img src="./game素材/imgs/star.gif" alt="" id="star">
        <audio src="./game素材/mp3/t.mp3" id = "bingo"></audio>
    </div>
</body>
<style>
    #main{
        width:800px;
        height:600px;
        /* background-color:black; */
        background-image: url('./game素材/imgs/timg2.jpg');
        text-align: center;
        position: relative;
        margin:0 auto;
        overflow: hidden;
    }
    #startBtn{
        width:100px;
        line-height:50px;
        border: 8px solid red;
        display: block;
        background-color: #fc9090;
        border-radius: 20px;
        color: rgb(246, 246, 245);
        font-weight: 900;

    }
    #startBtn:hover{
        background-color: #f26464;
        color: #000;
        border: 8px solid #46d772;
        cursor: pointer;
    }
    #girl{
        width: 80px;
        height: 80px;
        position: absolute;
        top: 540px;
        left: 400px;
        transform: translate(-50%, -50%);
        /* background-color: #aaa7fb; */
    }
    #star{
        
        width: 80px;
        height: 80px;
        position: absolute;
        top: 0px;
        left: 400px;
        /* background-color: #7cedcb; */

    }
    .zd{
        animation: shark 10ms 0s ease-in-out 20;
    }
    @keyframes shark {
        0%{
            transform: translateX(0px);
        }
        50%{
            transform: translateX(10px);
        }
        100%{
            transform: translateX(0px);
        }
    }
    #b_yellow{
        width: 200px;
        height: 25px;
        background-color: yellow;
        position: absolute;
        right: 10px;
        top: 10px;
        border-radius: 10px;
    }
    #b_red{
        width: 100%;
        line-height: 25px;
        background-color: red;
        border-radius: 10px;
    }
</style>
<script>
    let main = document.getElementById('main');
    let isGameStart = false
    let girl = document.getElementById('girl');
    let girl_left = 400;
    let star = document.getElementById('star');
    let star_top = 0;
    let speed = 20;
    let num = document.getElementById('num');
    let score = 0
    let bingo = document.getElementById("bingo")


    let b_red = document.getElementById('b_red');
    let b_num = 100
    main.addEventListener('animationend',function(){
        main.classList.remove('zd');
    })
    function startGame(){
        if(isGameStart) return;
        isGameStart = true;
        window.setInterval(move,100)
    }
    function move(){
        star_top +=speed;
        if(star_top>600){
            star_top = 0;
            star.style.left = parseInt(Math.random()*720) + 'px';
            speed = (parseInt(Math.random()*20)+20);
            if(score>0)
                score-=10
            if(b_num>0)
                b_num-=10
        }
        
        if(isTouch(girl,star)){
            // alert('撞到了');
            bingo.play();
            main.classList.add('zd');
            star_top = 0;
            star.style.left = parseInt(Math.random()*720) + 'px';
            speed = (parseInt(Math.random()*20)+20);
            score += 10
            
            
        }
        num.innerHTML = score;
        star.style.top = star_top + 'px';
        b_red.style.width = b_num + '%';
        b_red.innerHTML = b_num + '%';
    }

    document.onkeydown = function(e){
        switch(e.keyCode){
            case 37:
                girl_left -= 10;
                if(girl_left<=0)
                    girl_left = 760;
                break;
            case 38:
                break;
            case 39:
                girl_left += 10;
                if(girl_left>=760)
                    girl_left = 0;
                break;
            case 40:
                break;
        }
        girl.style.left = girl_left + 'px';
    }
    //获取内联样式表的样式
    function getCss(ele,css)
	  {
	    return parseInt(window.getComputedStyle(ele,null)[css]);
	  }


//碰撞
    function isTouch(ele_a,ele_b)
	  {
	    var manLeft=getCss(ele_a,"left");
		var manWidth=getCss(ele_a,"width");
		var manTop=getCss(ele_a,"top");
		var manHeight=getCss(ele_a,"height");
		
		var rockLeft=getCss(ele_b,"left");
		var rockWidth=getCss(ele_b,"width");
		var rockTop=getCss(ele_b,"top");
		var rockHeight=getCss(ele_b,"height");
		 
		return 	Math.abs(manLeft-rockLeft)<(manWidth/2+rockWidth/2)
		&& Math.abs(manTop-rockTop)<(manHeight/2+rockHeight/2);
		  //撞到了
	  }
</script>
</html>